<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据分析 - BodyGuard体重管理</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <style>
    body {
      background-color: #f5f5f5;
      height: 100vh;
      width: 100%;
      overflow: hidden;
      position: relative;
    }
    .page-content {
      height: calc(100vh - 112px);
      overflow-y: auto;
      padding-bottom: 60px;
    }
    .card-shadow {
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    }
    .chart-container {
      position: relative;
      height: 200px;
      width: 100%;
      padding: 1rem 0;
    }
    .chart-line {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 150px;
    }
    .chart-dot {
      position: absolute;
      width: 8px;
      height: 8px;
      background-color: #10b981;
      border-radius: 50%;
      z-index: 2;
    }
    .chart-dot::after {
      content: '';
      position: absolute;
      width: 16px;
      height: 16px;
      background-color: rgba(16, 185, 129, 0.2);
      border-radius: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
    }
    .chart-line::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 1px;
      background-color: #e5e7eb;
      top: 0;
    }
    .chart-line::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 1px;
      background-color: #e5e7eb;
      top: 50%;
    }
    .tab-active {
      border-bottom: 2px solid #10b981;
      color: #10b981;
    }
  </style>
</head>
<body>
  <!-- 导入状态栏和微信导航栏组件 -->
  <div id="statusbar-container"></div>
  
  <!-- 页面内容区域 -->
  <div class="page-content p-4">
    <!-- 时间范围选择 -->
    <div class="flex justify-between mb-4">
      <div class="tab-item tab-active py-2 px-4 text-center font-medium">
        周
      </div>
      <div class="tab-item py-2 px-4 text-center font-medium text-gray-500">
        月
      </div>
      <div class="tab-item py-2 px-4 text-center font-medium text-gray-500">
        3个月
      </div>
      <div class="tab-item py-2 px-4 text-center font-medium text-gray-500">
        年
      </div>
      <div class="tab-item py-2 px-4 text-center font-medium text-gray-500">
        全部
      </div>
    </div>
    
    <!-- 体重变化卡片 -->
    <div class="bg-white rounded-xl p-4 card-shadow mb-4">
      <div class="flex justify-between items-center mb-3">
        <h2 class="text-lg font-medium">体重变化</h2>
        <div class="bg-green-50 text-green-600 text-xs px-2 py-1 rounded-full">
          <i class="fas fa-arrow-down text-xs"></i> 下降 0.8kg
        </div>
      </div>
      
      <!-- 简化的图表展示 -->
      <div class="chart-container">
        <div class="chart-line">
          <div class="chart-dot" style="left: 10%; bottom: 30%"></div>
          <div class="chart-dot" style="left: 25%; bottom: 50%"></div>
          <div class="chart-dot" style="left: 40%; bottom: 45%"></div>
          <div class="chart-dot" style="left: 55%; bottom: 60%"></div>
          <div class="chart-dot" style="left: 70%; bottom: 55%"></div>
          <div class="chart-dot" style="left: 85%; bottom: 70%"></div>
          <!-- 用SVG绘制连接线 -->
          <svg width="100%" height="150" style="position: absolute; top: 0; left: 0; z-index: 1;">
            <path d="M10% 70% L25% 50% L40% 55% L55% 40% L70% 45% L85% 30%" stroke="#10b981" stroke-width="2" fill="none" />
          </svg>
        </div>
      </div>
      
      <div class="flex justify-between text-xs text-gray-500">
        <span>周一</span>
        <span>周二</span>
        <span>周三</span>
        <span>周四</span>
        <span>周五</span>
        <span>今天</span>
      </div>
      
      <!-- 数据统计 -->
      <div class="flex justify-between mt-4 pt-4 border-t border-gray-100">
        <div class="text-center">
          <div class="text-sm text-gray-500">起始</div>
          <div class="font-medium">67.3kg</div>
        </div>
        <div class="text-center">
          <div class="text-sm text-gray-500">当前</div>
          <div class="font-medium">66.5kg</div>
        </div>
        <div class="text-center">
          <div class="text-sm text-gray-500">最高</div>
          <div class="font-medium">67.5kg</div>
        </div>
        <div class="text-center">
          <div class="text-sm text-gray-500">最低</div>
          <div class="font-medium">66.3kg</div>
        </div>
      </div>
    </div>
    
    <!-- BMI变化卡片 -->
    <div class="bg-white rounded-xl p-4 card-shadow mb-4">
      <div class="flex justify-between items-center mb-3">
        <h2 class="text-lg font-medium">BMI变化</h2>
        <div class="text-xs px-2 py-1 rounded-full bg-green-50 text-green-600">
          健康范围
        </div>
      </div>
      
      <!-- 简化的图表展示 -->
      <div class="chart-container">
        <div class="chart-line">
          <div class="chart-dot" style="left: 10%; bottom: 35%"></div>
          <div class="chart-dot" style="left: 25%; bottom: 45%"></div>
          <div class="chart-dot" style="left: 40%; bottom: 40%"></div>
          <div class="chart-dot" style="left: 55%; bottom: 55%"></div>
          <div class="chart-dot" style="left: 70%; bottom: 50%"></div>
          <div class="chart-dot" style="left: 85%; bottom: 60%"></div>
          <!-- 用SVG绘制连接线 -->
          <svg width="100%" height="150" style="position: absolute; top: 0; left: 0; z-index: 1;">
            <path d="M10% 65% L25% 55% L40% 60% L55% 45% L70% 50% L85% 40%" stroke="#10b981" stroke-width="2" fill="none" />
          </svg>
        </div>
      </div>
      
      <div class="flex justify-between text-xs text-gray-500">
        <span>周一</span>
        <span>周二</span>
        <span>周三</span>
        <span>周四</span>
        <span>周五</span>
        <span>今天</span>
      </div>
      
      <!-- 数据统计 -->
      <div class="flex justify-between mt-4 pt-4 border-t border-gray-100">
        <div class="text-center">
          <div class="text-sm text-gray-500">起始</div>
          <div class="font-medium">23.1</div>
        </div>
        <div class="text-center">
          <div class="text-sm text-gray-500">当前</div>
          <div class="font-medium">22.8</div>
        </div>
        <div class="text-center">
          <div class="text-sm text-gray-500">最高</div>
          <div class="font-medium">23.2</div>
        </div>
        <div class="text-center">
          <div class="text-sm text-gray-500">最低</div>
          <div class="font-medium">22.7</div>
        </div>
      </div>
    </div>
    
    <!-- 打卡记录列表 -->
    <h2 class="text-lg font-medium mb-3">近期打卡记录</h2>
    <div class="bg-white rounded-xl overflow-hidden card-shadow">
      <!-- 记录项 -->
      <div class="p-3 border-b border-gray-100 flex justify-between items-center">
        <div>
          <div class="font-medium">今天</div>
          <div class="text-xs text-gray-500">10:25</div>
        </div>
        <div class="text-center">
          <div class="font-medium">66.5kg</div>
          <div class="text-xs text-green-500">
            <i class="fas fa-arrow-down text-xs"></i> -0.2kg
          </div>
        </div>
        <div class="text-right">
          <div class="font-medium">BMI 22.8</div>
          <div class="text-xs text-green-600">正常范围</div>
        </div>
      </div>
      
      <div class="p-3 border-b border-gray-100 flex justify-between items-center">
        <div>
          <div class="font-medium">昨天</div>
          <div class="text-xs text-gray-500">08:30</div>
        </div>
        <div class="text-center">
          <div class="font-medium">66.7kg</div>
          <div class="text-xs text-green-500">
            <i class="fas fa-arrow-down text-xs"></i> -0.3kg
          </div>
        </div>
        <div class="text-right">
          <div class="font-medium">BMI 22.9</div>
          <div class="text-xs text-green-600">正常范围</div>
        </div>
      </div>
      
      <div class="p-3 border-b border-gray-100 flex justify-between items-center">
        <div>
          <div class="font-medium">3月19日</div>
          <div class="text-xs text-gray-500">09:15</div>
        </div>
        <div class="text-center">
          <div class="font-medium">67.0kg</div>
          <div class="text-xs text-red-500">
            <i class="fas fa-arrow-up text-xs"></i> +0.2kg
          </div>
        </div>
        <div class="text-right">
          <div class="font-medium">BMI 23.0</div>
          <div class="text-xs text-green-600">正常范围</div>
        </div>
      </div>
      
      <div class="p-3 flex justify-center text-sm text-gray-500">
        <span>查看更多记录 <i class="fas fa-chevron-right text-xs ml-1"></i></span>
      </div>
    </div>
  </div>
  
  <!-- 导入底部导航栏组件 -->
  <div id="tabbar-container"></div>
  
  <script>
    // 加载状态栏组件
    fetch('../components/statusbar.html')
      .then(response => response.text())
      .then(data => {
        document.getElementById('statusbar-container').innerHTML = data;
      });
    
    // 加载底部导航栏组件
    fetch('../components/tabbar.html')
      .then(response => response.text())
      .then(data => {
        document.getElementById('tabbar-container').innerHTML = data;
      });
  </script>
</body>
</html> 